<template>
  <div class="personal layout-pd">
    <el-row>
      <!-- 商品信息 -->
      <el-col :xs="24" :sm="16">
        <el-card shadow="hover" header="商品信息">
          <div class="personal-user">
            <div class="personal-user-right">
              <el-row>
                <el-col :span="24">
                  <el-row>
                    <el-col :xs="24" class="personal-item mb12">
                      <div class="personal-item-label">产品名称：</div>
                      <div class="personal-item-value">
                        <el-text size="small">{{ state.goods_info.name }}</el-text>
                      </div>
                    </el-col>
                    <el-col :xs="24" class="personal-item mb12">
                      <div class="personal-item-label">描述：</div>
                      <div class="personal-item-value">
                        <el-text size="small">{{ state.goods_info.desc }}</el-text>
                      </div>
                    </el-col>
                  </el-row>
                </el-col>

              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- 订单详情-->
      <el-col :xs="24" :sm="8" class="pl15 personal-info">
        <el-card shadow="hover">
          <div class="order-total">
            <el-input type="text" v-model="state.coupon" maxlength="10" placeholder="优惠券?"/>
            <!--            <el-button style="margin-left: 10px" size="default" type="primary">验证</el-button>-->
            <el-button type="primary" @click="validateCoupon">
              <SvgIcon name="/src/assets/validate.svg" color="#000" style="margin-right: 10px" :size="24"/>
              验证
            </el-button>
          </div>

          <div class="order-total-detail">
            <div>
              <el-text>订单总额</el-text>
            </div>
            <div style="display: flex;margin-top: 20px">
              <div style="flex: 1">{{ state.goods_info.name }}</div>
              <div>￥{{state.currentPrice}}</div>
            </div>
            <el-divider/>
            <div>
              <el-text>总计</el-text>
            </div>
            <div style="display:flex;margin-top: 20px">
              <div v-if="state.showDiscount" style="flex: 1;text-decoration: line-through">
                <el-text size="large" tag="b">￥{{ state.oldPrice }}</el-text>
              </div>
              <div style="width: 100%;text-align: right">
                <el-text size="large" tag="b">￥{{ state.currentPrice }}</el-text>
              </div>

            </div>
            <el-button @click="createOrder" v-waves :loading="state.loading" style="width: 100%;margin-top: 20px"
                       color="#409eff">
              <SvgIcon name="ele-CircleCheck"/>
              下单
            </el-button>
          </div>
        </el-card>
      </el-col>

      <!-- 支付周期-->
      <el-col :xs="24" :sm="16" style="margin-top: -190px">
        <el-card shadow="hover" class="mt15" header="付款周期">

          <el-row :gutter="15" class="personal-recommend-row">
            <el-col :sm="32" v-for="(v, k) in state.pay_cycle_list" :key="k" @click="clickCycle(k)"
                    class="personal-recommend-col">
              <div class="personal-recommend" :style="{ 'border':v.border }">
                <!--                                <img class="pay-logo" :src="v.icon">-->
                <div class="personal-recommend-auto">
                  <div style="font-size: 20px">{{ v.title }}</div>
                  <div class="personal-recommend-msg price-show">￥{{ v.price }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script setup lang="ts" name="goodsDetail">
import {reactive, ref} from 'vue'
import {ElMessage} from 'element-plus';
import {useRouter, useRoute} from 'vue-router';
import {goodsApi} from "/@/api/goods";
import {orderApi} from "/@/api/order";

const router = useRouter(); // 获取路由实例
const route = useRoute();

const state = reactive({
  loading: false,
  goods_info: {},
  pay_cycle_list: [],
  pay_cycle_select: '',
  coupon: '',
  showDiscount: false,
  oldPrice: '0.00',
  currentPrice: '0.00'
})

const clickCycle = (index) => {
  state.pay_cycle_list.map((item, _index) => {
    item.border = '';
    if (_index == index) {
      item.border = '2px solid #686565';
      state.pay_cycle_select = item.id;
      state.currentPrice = item.price;
      state.oldPrice = item.price;
    }
  });

}

const validateCoupon = async () => {
  console.log('coupon', state.coupon)
  state.showDiscount = true
}
const createOrder = async () => {
  state.loading = true;
  const res = await orderApi().create({g_id: route.query.id, cycle: state.pay_cycle_select})
  state.loading = false;
  if (res.code != 0) {
    ElMessage.error(res.msg)
    return;
  }
  ElMessage.success('订单提交成功')
  setTimeout(() => {
    router.push({
      path:'order_detail',
      query:{sn:res.data.order_sn}
    });
  }, 500)
}

const getGoodsCycleInfo = async () => {
  const res = await goodsApi().cycle({g_id: route.query.id})
  if (res.code != 0) {
    ElMessage.error(res.msg)
    return;
  }
  state.pay_cycle_select = res.data[0].id;
  state.currentPrice = res.data[0].price;
  state.oldPrice = res.data[0].price;
  res.data.map((item, index) => {
    item.border = index == 0 ? '2px solid #686565' : '';
    state.pay_cycle_list.push(item);
  })
}
getGoodsCycleInfo();
const getGoodsInfo = async () => {
  const res = await goodsApi().detail({g_id: route.query.id})
  if (res.code != 0) {
    ElMessage.error(res.msg)
    return;
  }
  state.goods_info = res.data;
}
getGoodsInfo();
</script>

<style scoped lang="scss">
@import '../../../theme/mixins/index.scss';

.personal {
  .personal-user {
    height: 130px;
    display: flex;
    align-items: center;

    .personal-user-left {
      width: 100px;
      height: 130px;
      border-radius: 3px;

      :deep(.el-upload) {
        height: 100%;
      }

      .personal-user-left-upload {
        img {
          width: 100%;
          height: 100%;
          border-radius: 3px;
        }

        &:hover {
          img {
            animation: logoAnimation 0.3s ease-in-out;
          }
        }
      }
    }

    .personal-user-right {
      flex: 1;
      padding: 0 15px;

      .personal-title {
        font-size: 18px;
        @include text-ellipsis(1);
      }

      .personal-item {
        display: flex;
        align-items: center;
        font-size: 13px;

        .personal-item-label {
          color: var(--el-text-color-secondary);
          @include text-ellipsis(1);
        }

        .personal-item-value {
          @include text-ellipsis(1);
        }
      }
    }
  }

  .personal-info {
    .personal-info-more {
      float: right;
      color: var(--el-text-color-secondary);
      font-size: 13px;

      &:hover {
        color: var(--el-color-primary);
        cursor: pointer;
      }
    }

    .personal-info-box {
      height: 130px;
      overflow: hidden;

      .personal-info-ul {
        list-style: none;

        .personal-info-li {
          font-size: 13px;
          padding-bottom: 10px;

          .personal-info-li-title {
            display: inline-block;
            @include text-ellipsis(1);
            color: var(--el-text-color-secondary);
            text-decoration: none;
          }

          & a:hover {
            color: var(--el-color-primary);
            cursor: pointer;
          }
        }
      }
    }
  }

  .personal-recommend-row {
    margin-top: 20px;

    .pay-logo {
      position: absolute;
      right: 70px;
      top: 20px;
    }

    .price-show {
      position: absolute;
      top: 25px;
      right: 30px;
    }

    .personal-recommend-col {
      .personal-recommend {
        position: relative;
        height: 80px;
        border-radius: 10px;
        overflow: hidden;
        cursor: pointer;
        margin-top: 10px;
        background-color: rgba(64, 158, 2550, 0.4);

        &:hover {
          i {
            right: 0px !important;
            bottom: 0px !important;
            transition: all ease 0.3s;
          }
        }

        i {
          position: absolute;
          right: -10px;
          bottom: -10px;
          font-size: 70px;
          transform: rotate(-30deg);
          transition: all ease 0.3s;
        }

        .personal-recommend-auto {
          padding: 24px;
          //position: absolute;
          //left: 0;
          //top: 5%;
          color: var(--next-color-white);
          width: 100%;

          .personal-recommend-msg {
            font-size: 20px;
            margin-top: 0px;
          }
        }
      }
    }
  }

}

.order-total {
  height: 80px;
  background-color: #64d89d;
  display: flex;
  align-items: center;
  padding: 20px;
  border-radius: 6px;

  :deep(.el-input__wrapper) {
    padding: 0px !important;
  }

  :deep(.el-input__inner) {
    background-color: #64d89d;
  }
}

.order-total-detail {
  background-color: #64d89d;
  align-items: center;
  padding: 20px;
  border-radius: 6px;
  margin-top: 20px;
  display: block;
}

</style>
